/* 
    Created on : 
    Author     : Isabel Pinuaga
*/

html{
    overflow: scroll;
}

body{
   background: grey;
    width: 95%;
    margin: 2.5%;
    padding:0;
}


/* estilo del header */
header{
 background: linear-gradient(to bottom, #CEECF5 0%, #0404B4 100%);              
 color: white;                           
 margin: 10px;
 padding: 10px;  border: 3px white;
 border-radius: 10px;
 box-shadow: -5px -5px white; 
 text-align: center;
}

footer {
 margin: 10px;
 color: whait;                            
 background-color: blackOrchid;               
 padding: 10px;
 border-radius: 10px; 
 box-shadow: -5px -5px white; 
 text-align: center;
}


.container{ clear: both;
    font-family: 'Roboto', serif;
    color: white;
    background: linear-gradient(to bottom, #CEECF5 0%, #0404B4 100%);
    padding-left: 35%;
    border: solid;
    margin: auto;
    height: 450px;
    align-items: center;  
} 
.calcul00 {   
  width: 350px;
            height: 400px;
            border-radius: 20px;
            border: solid 4px #a8a8a8;
            background: linear-gradient(to bottom, #f2f2f2 0%,#8e8e8e 100%);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            box-shadow: 10px 10px 26px -4px rgba(0,0,0,0.41);
            margin-top: 10px;
            text-align: center;
            
        }

#calcdspl{font-size: 1.5em;
    text-align: right;
    border: groove;
    padding-right: 1.5%;
    height: 40px;
    width: 300px;
    margin-top: 30px;
}
#calcbt1o{font-size: 1.5em;
    text-align: right;
    padding-right: 1.5%;
    height: 60px;
    width: 350px;
    margin-top: 30px;
   
}
#calcbt2o{font-size: 1.5em;
    text-align: right;
    padding-right: 1.5%;
    height: 60px;
    width: 350px;
    margin-top: 30px;
}
#calcbt3o{font-size: 1.5em;
    text-align: right;
    padding-right: 1.5%;
    height: 60px;
    width: 280px;
    margin-top: 35px;
}

.buttonL{
 width: 50px; 
 height: 55px;
 border-radius: 10px;
 background-color:white ;
 border-bottom-color: grey;
 color: black
}

.buttonXL{
 width: 100px; 
 height: 50px;
 border-radius: 10px;
 background-color: white;
 border-bottom-color: grey;
 color: black
}

.buttonL:hover, .buttonXL:hover {
  background-color: #FFB6C1;
  color: white;
}